*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    border: none;
    overflow: hidden;
}
body {
    overflow: hidden;
    font-family: "微软雅黑";
}
ul,li,ol,dl,dt,dd{
    list-style: none;
}
a,a:hover{
    text-decoration: none;
}


/** 首页 **/
.case{
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    z-index: 3;
    width: 100%;
    height: 100%;
    min-height: 27rem;
    overflow: hidden;
    background-color: #000119;

}

/** 首页背景  **/
.case::before{
    content: '';
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 27rem;
    overflow: hidden;
    opacity: .85;
    background-image: url(../img/abiBgBLong.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/** 返回  **/
.case .goBack{
    position: absolute;
    right: 1.715rem;
    top: 1.261rem;
    width: 2.446rem;
    height: 1.387rem;
    background-image: url(../img/casebtn01.png);
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
    background-size: 100% 100%;
}
.case .goBack:hover{
    background-image: url(../img/casebtn01hover.png);
}

/** 大标题  **/
.case .headlines{
    position: absolute;
    left: 0;
    top: 10.74%;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    letter-spacing: 3px;
    background-image: url(../img/abiBnavBj1.png);
    background-position: center 4px;
    background-repeat: no-repeat;
}
.case .headlines h2{
    line-height: 107px;
    font-size: 0.958rem;
    background-image:-webkit-linear-gradient(90deg,#ffffff 0,#91abe4 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    color: #d8ecff;
}
.case .headlines h3{
    line-height: 50px;
    font-size: 30px;
    background-image:-webkit-linear-gradient(90deg,#ffffff 0,#91abe4 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    color: #d8ecff;
    font-weight: 600;
    margin-top: 0.756rem;
}

/** 中间主体部分  **/
.picScroll{
    position: absolute;
    left: 50%;
    top: 30.85%;
    width:1660px;
    height: 476px;
}
.picScroll .bd{
    width: auto;
    height: 476px;
    overflow:hidden;
    margin:0 4.89% 0 5.34%;
}
.picScroll .bd ul{
    width: 100%;
    height: 476px;
    overflow:hidden;
    position: relative;
}
.picScroll .bd ul li{
    float: left;
    width: auto;
    height: 413px;
    text-align:center;
    padding: 43px 0 20px;
    margin-bottom: 50px;
}
.picScroll .bd ul li a{
    display: block;
    position: relative;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 11px;
}
.picScroll .bd ul .listA a{
    background-image: url(../img/caseBgA1.png);
}
.picScroll .bd ul .listC a{
    background-image: url(../img/caseBgE1.png);
}
.picScroll .bd ul .listD a{
    background-image: url(../img/caseBgD1.png);
}
.picScroll .bd ul .listE a{
    background-image: url(../img/caseBgC1.png);
}
.picScroll .bd ul .listF a{
    background-image: url(../img/caseBgF1.png);
}
.picScroll .bd ul .listG a{
    background-image: url(../img/caseBgG1.png);
}

.picScroll .bd ul li:nth-child(2) a, .picScroll .bd ul li:nth-child(4) a{
    border-radius: 2px;
}

.picScroll .bd ul li a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 290px;
    width: 100%;
    height: 123px;
    background-position: center top;
    background-size: 100%;
    background-repeat: no-repeat;
}
.picScroll .bd ul .listA a:before{
    background-image: url(../img/caseBgA3.png);
}
.picScroll .bd ul .listC a:before{
    background-image: url(../img/caseBgE3.png);
}
.picScroll .bd ul .listD a:before{
    background-image: url(../img/caseBgD3.png);
}
.picScroll .bd ul .listE a:before{
    background-image: url(../img/caseBgC3.png);
}
.picScroll .bd ul .listF a:before{
    background-image: url(../img/caseBgF3.png);
}
.picScroll .bd ul .listG a:before{
    background-image: url(../img/caseBgG3.png);
}

.picScroll .bd ul li a:after{
    content: '';
    position: absolute;
    top: 19px;
    left: 35px;
    width: 206px;
    height: 220px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}
.picScroll .bd ul .listA a:after{
    background-image: url(../img/caseBgA2.png);
}
.picScroll .bd ul .listC a:after{
    background-image: url(../img/caseBgE2.png);
}
.picScroll .bd ul .listD a:after{
    background-image: url(../img/caseBgD2.png);
}
.picScroll .bd ul .listE a:after{
    background-image: url(../img/caseBgC2.png);
}
.picScroll .bd ul .listF a:after{
    background-image: url(../img/caseBgF2.png);
}
.picScroll .bd ul .listG a:after{
    background-image: url(../img/caseBgG2.png);
}

.picScroll .bd ul li .module{
    width: 275px;
    height: 290px;
    position: relative;
    z-index: 1;
}
.picScroll .bd ul li .module img{
    position: absolute;
}
.picScroll .bd ul li h6{
    position: absolute;
    bottom: 29px;
    left: 0;
    width: 100%;
    height: 34px;
    line-height: 34px;
    font-size: 20px;
    color: #fff;
    letter-spacing: 1px;
    font-weight: normal;
}

/* li hover */
.picScroll .bd ul .listA a:hover, .picScroll .bd ul .listA.active a{
    background-image: url(../img/caseBgAhover1.png);
}
.picScroll .bd ul .listC a:hover, .picScroll .bd ul .listC.active a{
    background-image: url(../img/caseBgEhover1.png);
}
.picScroll .bd ul .listD a:hover, .picScroll .bd ul .listD.active a{
    background-image: url(../img/caseBgDhover1.png);
}
.picScroll .bd ul .listE a:hover, .picScroll .bd ul .listE.active a{
    background-image: url(../img/caseBgChover1.png);
}
.picScroll .bd ul .listF a:hover, .picScroll .bd ul .listF.active a{
    background-image: url(../img/caseBgFhover1.png);
}
.picScroll .bd ul .listG a:hover, .picScroll .bd ul .listG.active a{
    background-image: url(../img/caseBgGhover1.png);
}

.picScroll .bd ul .listA a:hover:after, .picScroll .bd ul .listA.active a:after{
    background-image: url(../img/caseBgAhover2.png);
}
.picScroll .bd ul .listC a:hover:after, .picScroll .bd ul .listC.active a:after{
    background-image: url(../img/caseBgEhover2.png);
}
.picScroll .bd ul .listD a:hover:after, .picScroll .bd ul .listD.active a:after{
    background-image: url(../img/caseBgDhover2.png);
}
.picScroll .bd ul .listE a:hover:after, .picScroll .bd ul .listE.active a:after{
    background-image: url(../img/caseBgChover2.png);
}
.picScroll .bd ul .listF a:hover:after, .picScroll .bd ul .listF.active a:after{
    background-image: url(../img/caseBgFhover2.png);
}
.picScroll .bd ul .listG a:hover:after, .picScroll .bd ul .listG.active a:after{
    background-image: url(../img/caseBgGhover2.png);
}